<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <!-- Import style -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <link rel="stylesheet" href="./static/element-plus/theme-chalk/display.css"/>
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .main{
            width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 280px);
        }
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }
        .el-form-item.is-error .el-input__inner {
            border-color: red;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
       <el-header>
        <el-row>
          <el-col :span="4" style="display: flex;flex-direction:row;align-items:center">
          <img src="./static/images/logo.png"  style="height: 60px;">
          <h2 style="padding-left: 8px;">技术社区</h2>
          </el-col>
      <el-col :span="8">
          <el-menu :default-active="activeIndex" 
          mode="horizontal" 
          style="border-bottom: none  !important"
          :ellipsis="false">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">文章</el-menu-item>
          <el-menu-item index="3">课程</el-menu-item>
          <el-menu-item index="4">商城</el-menu-item>
          </el-menu>
      </el-col>
      <el-col :span="8" style="height: 60px; line-height:60px" class="hidden-xs-only">
        <el-input/>
      </el-col>
      <el-col :span="4" style="line-height: 60px;" class="hidden-xs-only">
        <el-link type="primary">登录</el-link>
        <el-link type="primary" style="padding: 8px;">注册</el-link>
      </el-col>
    </el-row>
 </el-header>
<el-main class="main">
    <el-form label-width="auto" style="max-width: 600px;margin:80px auto;"  >
        <el-form-item label="用户名" :status-icon="true" :error="nameError">
          <el-input v-model="name" @blur="validateName"/>
          <div v-if="nameError" class="error-message">{{ nameError }}</div>
        </el-form-item>
        <el-form-item label="密码" :status-icon="true" :error="passwordError">
          <el-input v-model="password" type="password" @blur="validatePassword"/>
          <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
        </el-form-item>
        <el-form-item label="确认密码" :status-icon="true" :error="confirmPasswordError">
          <el-input v-model="confirmPassword" type="password" @blur="validateConfirmPassword"/>
          <div v-if="confirmPasswordError" class="error-message">{{ confirmPasswordError }}</div>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="age" type="number"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="gender">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="兴趣爱好">
            <el-checkbox-group v-model="hobby">
              <el-checkbox value="阅读" name="type">阅读</el-checkbox>
              <el-checkbox value="运动" name="type">运动</el-checkbox>
              <el-checkbox value="旅行" name="type">旅行</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="职业">
            <el-select v-model="job" placeholder="please select your zone">
              <el-option value="前端开发工程师">前端开发工程师</el-option>
              <el-option value="后端开发工程师">后端开发工程师</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自我介绍">
            <el-input v-model="info" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
      </el-form>
</el-main>
        <el-footer>
          <el-row>
            <el-col :lg="8":xs="24" style="display: flex;flex-direction:row;align-items:center;">
              <div><img src="./static/images/logo.png" style="width: 100px;"></div>
              <div style="padding-left: 8px;">
                <h2>技术社区</h2>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :lg="8":xs="24">
              <div>
                <el-link type="primary">首页</el-link>
                <el-link type="primary">文章</el-link>
                <el-link type="primary">课程</el-link>
                <el-link type="primary">商城</el-link>
              </div>
              <div>
                <el-link type="primary">关于我们</el-link>
                <el-link type="primary">使用手册</el-link>
                <el-link type="primary">隐私条款</el-link>
                <el-link type="primary">建议反馈</el-link>
              </div>
            </el-col>
            <el-col :lg="8":xs="24">
              <h2>联系我们</h2>
              <p>电话：1111111</p>
              <p>邮箱：111@dev.com</p>
            </el-col>
          </el-row>
          <div style="background-color: #a0cfff;text-align:center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
        </el-footer>
      </el-container>


      <el-dialog
    v-model="dialogVisible"
    title="请确认注册信息"
    width="500">
    <div style="display:flex ; flex-direction:column;">
        <span>姓 名: {{name}}</span>
        <span>年 龄: {{age}}</span>
        <span>性 别: {{gender}}</span>
        <span>兴趣爱好: {{hobby}}</span>
        <span>职 业: {{job}}</span>
        <span>自我介绍: {{info}}</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false; goToIndexPage()">确认</el-button>
      </div>
    </template>
  </el-dialog>


    </div>
  </body>
  <script>
    var App = {
      data() {
        return {
          name: "",
          password:"",
          confirmPassword: "",
          age:0,
          gender:"",
          hobby:[],
          job:"",
          info:"",
          activeIndex:"1",
          dialogVisible:false,
          nameError: '',
          passwordError: '',
          confirmPasswordError: ''
        };
      },
      methods:{
        onSubmit(){
            if (!this.nameError && !this.passwordError && !this.confirmPasswordError) {
                this.dialogVisible=true;
            }
        },
        goToIndexPage() {
          window.location.href = 'index.html';
        },
        validateName() {
            if (this.name.length < 4) {
                this.nameError = '用户名长度不能少于4个字符';
            } else {
                this.nameError = '';
            }
        },
        validatePassword() {
            if (this.password.length < 6) {
                this.passwordError = '密码长度不能少于6个字符';
            } else {
                this.passwordError = '';
            }
            this.validateConfirmPassword();
        },
        validateConfirmPassword() {
            if (this.confirmPassword && this.confirmPassword !== this.password) {
                this.confirmPasswordError = '两次输入的密码不一致';
            } else {
                this.confirmPasswordError = '';
            }
        }
      }
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</html>
    